/**
 * 仪表盘
 * PanelEcahrtsC (reactCharts)
 * @author hly
 * @date  2021-11-24
 */

import React from 'react';
import { Spin, Row, Col } from 'antd';
import PropTypes from 'prop-types';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import { NoDataC } from '@/src/components';
import Color from '../../../css/colors';
import style from './style.less';

class PanelEcahrtsC extends React.Component {
  static defaultProps = {
    data: undefined, // 数据
    center: ['50%', '50%'], // 图形坐标
    height: '210px',
    panelHeight: '130px',
    width: '130px',
    maxValue: 1, // 最大阀值
  };

  // 根据数据值和最大阀值获取仪表盘占比
  getPointAngle = (data, maxValue) => {
    if (data && data.length > 0) {
      const temp = parseFloat(maxValue - data[0].value).toFixed(2) / parseFloat(maxValue).toFixed(2);
      const result = parseFloat(360 * temp).toFixed(2) - 180;

      if (result >= 180) {
        return 180;
      } else if (result <= -180) {
        return -179.9;
      } else {
        return result;
      }
    } else {
      return 180;
    }
  };

  // 处理option
  getOption = (data) => {
    const { maxValue, detailFormatter, titleFormatter, center } = this.props;
    const pointerAngle = this.getPointAngle(data, maxValue); // 当前指针（值）角度
    const option = {
      series: [
        {
          z: 3,
          min: 0,
          max: maxValue,
          name: '上层',
          radius: '100%',
          type: 'gauge',
          center,
          startAngle: 180,
          endAngle: pointerAngle,
          detail: { show: false },
          axisLine: {
            // 仪表盘轴线(轮廓线)相关配置。
            show: false, // 是否显示仪表盘轴线(轮廓线),默认 true。
            lineStyle: {
              // 仪表盘轴线样式。
              opacity: 0, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              width: 15, // 轴线宽度,默认 30。
            },
          },
          splitLine: { show: false },
          axisTick: {
            // 刻度(线)样式。
            splitNumber: data && data.length ? (data[0].value / maxValue) * 5 : 10,
            show: true,
            length: 4,
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.39,
                    color: Color.echartItems.panelTickDColorOne,
                  },
                  {
                    offset: 0.13,
                    color: Color.echartItems.panelTickDColorTwo,
                  },
                  {
                    offset: 0.75,
                    color: Color.echartItems.panelTickDColorThree,
                  },
                ],
                global: false, // 缺省为 false
              },
              width: 1,
            },
          },
          axisLabel: { show: false },
          pointer: { show: false },
        },
        {
          name: '底层',
          min: 0,
          max: maxValue,
          radius: '100%',
          type: 'gauge',
          center,
          detail: { show: false },
          startAngle: 180,
          endAngle: -179.9,
          axisLine: {
            // 仪表盘轴线(轮廓线)相关配置。
            show: false, // 是否显示仪表盘轴线(轮廓线),默认 true。
            lineStyle: {
              // 仪表盘轴线样式。
              width: 3, // 轴线宽度,默认 30。
              opacity: 0,
            },
          },
          splitLine: { show: false },
          axisTick: {
            // 刻度(线)样式。
            splitNumber: 5,
            show: true,
            length: 4,
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.48,
                    color: Color.echartItems.panelTickNColorOne,
                  },
                  {
                    offset: 0.17,
                    color: Color.echartItems.panelTickNColorTwo,
                  },
                  {
                    offset: 0.91,
                    color: Color.echartItems.panelTickNColorThree,
                  },
                ],
                global: false, // 缺省为 false
              },
              width: 2,
            },
          },
          axisLabel: { show: false },
          pointer: { show: false },
        },
        {
          z: 3,
          name: '上层-圆',
          radius: '90%',
          type: 'gauge',
          center,
          startAngle: 180,
          endAngle: pointerAngle,
          title: titleFormatter
            ? titleFormatter
            : {
                show: true,
                offsetCenter: [0, '20%'], // 相对于仪表盘中心的偏移位置，第一项是水平方向的偏移，第二项是垂直方向的偏移
                color: Color.echartItems.title,
                fontWeight: '400',
                fontSize: '14',
              },
          detail: detailFormatter
            ? detailFormatter
            : {
                show: true,
                offsetCenter: [0, '-20%'], // 相对于仪表盘中心的偏移位置，第一项是水平方向的偏移，第二项是垂直方向的偏移
                color: Color.echartItems.panelDetail,
                fontWeight: '500',
                fontSize: '18',
              },
          axisLine: {
            // 仪表盘轴线(轮廓线)相关配置。
            show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
            lineStyle: {
              // 仪表盘轴线样式。
              color: [
                [
                  1,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0.39,
                      color: Color.echartItems.panelTickDColorOne,
                    },
                    {
                      offset: 0.13,
                      color: Color.echartItems.panelTickDColorTwo,
                    },
                    {
                      offset: 0.75,
                      color: Color.echartItems.panelTickDColorThree,
                    },
                  ]),
                ],
              ],
              opacity: 0.8, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              width: 7, // 轴线宽度,默认 30。
            },
          },
          splitLine: { show: false },
          axisTick: {
            // 刻度(线)样式。
            show: false,
          },
          axisLabel: { show: false },
          pointer: { show: false },
          data,
        },
        {
          name: '底层-圆',
          radius: '90%',
          type: 'gauge',
          center,
          startAngle: 180,
          endAngle: -179.9,
          detail: { show: false },
          axisLine: {
            // 仪表盘轴线(轮廓线)相关配置。
            show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
            lineStyle: {
              // 仪表盘轴线样式。
              color: [
                [
                  1,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0.48,
                      color: Color.echartItems.panelTickNColorOne,
                    },
                    {
                      offset: 0.17,
                      color: Color.echartItems.panelTickNColorTwo,
                    },
                    {
                      offset: 0.91,
                      color: Color.echartItems.panelTickNColorThree,
                    },
                  ]),
                ],
              ],
              opacity: 0.8, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              width: 7, // 轴线宽度,默认 30。
            },
          },
          splitLine: { show: false },
          axisTick: {
            // 刻度(线)样式。
            show: false,
          },
          axisLabel: { show: false },
          pointer: { show: false },
        },
      ],
    };
    return option;
  };

  // echarts渲染
  showEcharts = () => {
    const { data, height, width, panelHeight } = this.props;
    const tempData = [];
    data.forEach((item) => {
      tempData.push([item]);
    });
    return (
      <Row type='flex' justify='space-around' className={style.panelBgcolor} style={{ padding: '0 20px 0 20px' }}>
        {tempData?.map((item, key) => {
          return (
            <Col key={key}>
              <div className={style.panelItem} style={{ height, width }}>
                <div className={style.topCircle}>
                  <ReactEcharts style={{ height: panelHeight, width }} option={this.getOption(item)} />
                </div>
                <div className={style.bottomBox}>
                  <span className={style.boxData}>{item[0].date}</span>
                </div>
              </div>
            </Col>
          );
        })}
      </Row>
    );
  };

  render() {
    const { data, height, width } = this.props;
    const initStatus = data !== undefined && data !== null; // 标记是否达到初始化状态(true:可以初始化图表，false：还未获取到数据)
    return (
      <div>
        <Spin spinning={!initStatus} tip='加载中...'>
          {initStatus ? data.length > 0 ? this.showEcharts() : <NoDataC height={height} /> : <div style={{ height, width }}></div>}
        </Spin>
      </div>
    );
  }
}
PanelEcahrtsC.propsTypes = {
  data: PropTypes.array, // 数据（[{name:'',value:'']）
  center: PropTypes.array, // 图形坐标
  width: PropTypes.string, // 图形宽度
  height: PropTypes.string, // 图形高度
  panelHeight: PropTypes.string, // echarts图形高度
  maxValue: PropTypes.number, // 最大阀值
  detailFormatter: PropTypes.func, // 详情自定义样式
  titleFormatter: PropTypes.func, // 标题自定义样式
};
export default PanelEcahrtsC;
